<template>
  <div id="club" ref="homePage">
    <div class="input_pl" v-show="isPlshow">
      <mt-field label="" placeholder="输入评论内容" v-model="pl_value">
        <span class="submit_b" @click="addBookPl()">发布</span>
      </mt-field>
    </div>
    <mt-loadmore :maxDistance="0" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
      <div class="main" v-for="(item,index) in listdata" :key="index">
        <div class="club-head">
          <p class="club-head-img">
            <img :src="imgUrl+item.userPortrait" :onerror="defaultImg" alt="" width="28px" height="28px" />
            <span class="club-head-name" v-text="item.userName">麦小豆</span>
          </p>
          <span class="club-head-time" v-text="item.createDate">2018.04.15 19：58</span>
        </div>
        <p class="club-title" v-text="item.describ">如果自己不想积极的生活，那么自己不管什么回答都没有用</p>
        <div class="club-nav">
          <div class="lazy-bg">
            <img class="lazy-img" :src="item.cover" alt="" width="72px" height="95px" />
          </div>
          <div class="club-nav-right">
            <p v-html="item.bookName">解忧杂货店</p>
            <p>作者：
              <span v-text="item.author"></span>
            </p>
            <p>简介：
              <span v-text="item.bookDescribe"></span>
            </p>
          </div>
        </div>
        <div class="club-footer">
          <p class="club-footer-more">
            <img src="../../../../static/schoolroom/club/xiangqing.png" alt="" width="30px" height="30px" />
            <router-link :to='{path:"clubdetails", query:{dataid:item.id}}'>查看详情</router-link>
            <!--<router-link :to="{path:'libraryDetail/', query:{library_id:data.library_id}}">-->
          </p>
          <p class="club-footer-num">
            <span class="club-footer-zhan">
              <!--<img  @click="addlike(item.id)" :src="possess" alt="" />-->
              <span @click="addlike(item)">
                <img src="../../../../static/schoolroom/club/zhan-zhong.png" alt=""  width="30px" height="30px" v-if="item.likes == 1">
                <img src="../../../../static/schoolroom/club/zhan.png" width="30px" height="30px" alt="" v-else>
              </span>
              <span>{{item.likesCount}}</span>
              <img @click="openPL(item.id)" src="../../../../static/schoolroom/club/ping.png" alt="" width="30px" height="30px" />
              <span v-text="item.commentCount">78945</span>
            </span>
          </p>
        </div>
      </div>
    </mt-loadmore>
    <!-- <mt-button  type="default" size="large" class="morebtn" @click="getmore">{{more}}</mt-button> -->

  </div>
</template>

<script>
import { Toast } from "mint-ui";
import baseurl from "./../../../api/baseurl.js";
export default {
  data() {
    return {
      listdata: [],
      defaultImg: 'this.src="' + require('../../../../static/imgs/set-logo.png') + '"',
      userid: "",
      likeid: "",
      pageindex: 1,
      allLoaded: false,
      pl_value: "",
      isPlshow: false,
      bookfriendid: ""
    };
  },
  created() {
    var str = localStorage.getItem("userid"); //取回userid
    this.imgUrl = baseurl.imgUrl;
    this.userid = JSON.parse(str);
    this.getinfo(this.pageindex);
    this.getinfos();
  },
  methods: {
    openPL: function(id) {
      this.isPlshow = true;
      this.bookfriendid = id;
      console.log(id);
    },
    loadTop: function() {
      //组件提供的下拉触发方法
      //下拉加载
      console.log("下拉");
      this.pageindex = 1;
      this.getinfo();
      this.$refs.loadmore.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    },
    loadBottom: function() {
      // 上拉加载
      console.log("上拉");
      this.getmore();
      this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    },
    getmore() {
      //  1.0 实现this.pageindex值的增加1
      this.pageindex++;
      //	2.0 获取当前this.pageindex值对应的分页数据
      this.getinfo();
    },
    getinfo() {
      let that = this;
      const userid = localStorage.getItem("userid");
      that.$http({
          method: "get",
          url: baseurl.urls + "/bookfriendcircle/selectBookFriendCircleList",
          params: {
            userid: userid,
            pageNo: that.pageindex,
            pageSize: 10,
            type: 1
          }
        })
        .then(response => {
          if (response.status == 200) {
            if (that.pageindex == 1) {
              that.listdata = response.data.date.list;
              console.log(that.listdata);
            } else {
              let data = that.listdata;
              that.listdata = data.concat(response.data.date.list);
              console.log(that.listdata);
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getinfos() {
      const userid = localStorage.getItem("userid");
      this.$http({
        method: "get",
        url: baseurl.urls + "/bookfriendcircle/selectBookFriendCircleList",
        params: {
          userid: userid,
          pageNo: this.pageindex,
          pageSize: 10,
          type: 1
        }
      })
        .then(response => {
          if (response.status == 200) {
            this.listdata = response.data.date.list;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //点赞api
    addlike(item) {
      const userid = localStorage.getItem("userid");      
      //取消点赞
      if (item.likes == 1) {
        this.$http({
          method: "post",
          url: baseurl.urls + "/bookfriendcircle/addbookFriendCircleLikes",
          params: {
            userid: userid,
            bookfriendid: item.id,
            likes: 0
          }
        })
          .then(response => {
            console.log(response);
            if (response.status == 200) {
              Toast("取消点赞");
              this.getinfos();
            }
          })
          .catch(error => {
            console.log(error);
          });
        //点赞
      }else if (item.likes == 0) {
        this.$http({
          method: "post",
          url: baseurl.urls + "/bookfriendcircle/addbookFriendCircleLikes",
          params: {
            userid: userid,
            bookfriendid: item.id,
            likes: 1
          }
        })
          .then(response => {
            console.log(response);
            if (response.status == 200) {
              Toast("点赞成功");
              this.getinfos();
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    // 评论
    addBookPl() {
      let id = this.bookfriendid;
      const userid = localStorage.getItem("userid");
      const params = new URLSearchParams();
      params.append("userid", userid);
      params.append("bookfriendid", id);
      params.append("comment", this.pl_value);
      this.$http({
        method: "post",
        url: baseurl.urls + "/bookfriendcircle/addBookFriendCircleComment",
        data: params
      })
        .then(response => {
          // console.log(response.data.errorCode);
          if (response.data.errorCode == 1) {
            Toast("评论成功");
            this.isPlshow = false;
            this.pl_value = "";
          } else {
            Toast("评论失败");
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
#club {
  /* margin-bottom: 45px; */
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  height: -webkit-calc(100vh - 99px);
  margin-top: 52px;
}
.lazy-bg {
  background: url(../../../../static/home/bianchen.png) center center no-repeat;
}

.lazy-img {
  display: block;
}
.morebtn {
  width: 95%;
  margin: 0 auto;
  margin-top: 2vh;
}
a {
  color: #252525;
}

#club .main {
  padding: 0 15px;
  padding-top: 20px;
  background-color: #ffffff;
  margin-bottom: 2px;
}

.main .club-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.club-head-name {
  font-weight: 600;
  width: 165px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.club-head-time {
  font-size: 12px;
  color: #a1a1a1;
}

.club-title {
  margin: 10px 0;
  font-size: 15px;
  color: #252525;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.club-head-img {
  display: flex;
  align-items: center;
}

.club-head-img > img {
  width: 50px;
  height: 50px;
  margin-right: 8px;
  border-radius: 50%;
}

.club-nav {
  display: flex;
  border-radius: 8px;
  align-items: center;
  padding: 9px;
  box-shadow: darkgrey 1px 1px 5px;
  margin-bottom: 10px;
}

.club-nav-right {
  margin-left: 10px;
}

.club-nav-right p:nth-of-type(1) {
  font-size: 15px;
  color: #252525;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.club-nav-right p:nth-of-type(2) {
  font-size: 12px;
  color: #a1a1a1;
  margin-bottom: 11px;
}

.club-nav-right p:nth-of-type(3) {
  font-size: 12px;
  color: #a1a1a1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.club-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*background-color: cadetblue;*/
  padding-bottom: 11px;
  font-size: 12px;
}

.club-footer-more {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.club-footer-more img {
  margin-left: 8px;
}

.club-footer-zhan {
  display: flex;
  justify-content: center;
  align-items: center;
}

.club-footer-num > .club-footer-zhan > span {
  margin-left: 8px;
}

.club-footer-num > .club-footer-zhan > img {
  margin-left: 8px;
}
.submit_b {
  background: red;
  padding: 2px 15px;
  color: #ffffff;
}
.input_pl {
  border: 1px solid #efefef;
  position: fixed;
  width: 100%;
  z-index: 99;
  bottom: 48px;
}
</style>